<template>
<div class="json-view">
  <el-button size="mini" @click="show()">查看模版json</el-button>

  <el-dialog :visible="visible" title="打印预览" append-to-body :close-on-click-modal="false" :close-on-press-escape="false" @close="hideModal">
    <template slot="title">
      <span style="margin-right: 10px;">JSON</span>
      tid模式: <el-switch v-model="tidMode" name="tidMode" @change="onModeChange"></el-switch>
      美化: <el-switch v-model="beautify" name="tidMode" @change="onModeChange"></el-switch>
    </template>

    <el-input :value="jsonOut" type="textarea" size="mini" autosize style="width:40vw;height:50vh"></el-input>

    <template slot="footer">
      <el-button size="small" @click="hideModal()">关闭</el-button>
    </template>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "JsonView",
  props: {
    template: {type: Object}
  },
  data() {
    return {visible: false, jsonOut: '', tidMode: false, beautify: false}
  },
  mounted() {
    // console.log('----------JsonView---------')
    // console.log(this.$el);
  },
  methods: {
    hideModal() {
      this.visible = false;
    },
    show() {
      this.visible = true;
      this.$nextTick(() => {
        let json = this.tidMode ? this.template.getJsonTid() : this.template.getJson();
        let beautify = this.beautify ? 2 : 0;
        this.$set(this, 'jsonOut', JSON.stringify(json, null, beautify));
      })
    },
    onModeChange() {
      this.show();
    }
  }
}
</script>

<style lang="less" scoped>
.json-view {
  display: inline-block;
  min-width: 80px;
  min-height: 20px;
}
.el-dialog {}
</style>
